
<template>
  <div id='views'>
    <div class="content">
      <section class="s1">
        <p class="hoverhand" id="showBank" @click="createSel">
          <span>选择币种</span>
          <span class="right">
            <span>{{unit}}</span>
            <img src="../../common/imgs/arrowright.png" alt="箭头" class="arrowright">
          </span>
        </p>
        <p>
          <span>货币余额</span>
          <span class="right">{{least}} {{unit}}</span>
        </p>
        <div class="setNum">
          <p class="title">提现金额</p>
          <div class="inputdiv">
            <input type="number" v-model="getNum" placeholder="请输入提现金额" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
          </div>
        </div>
        <div class="selectCard">
          <p class="gettitle">提现账号</p>
          <router-link to="/my_banks_coinsaddress" id="selCardBtn" class="hoverhand">
            <span style="padding:0;" v-if="!selBank">去添加银行卡</span>
            <span class="name" v-if="selBank">
              <img :src="bankImg" alt="图片" v-if="bankImg">
              <span>
                {{selBank.bank_name}}<span style="padding:0 0.15rem">|</span><span>尾号：{{selBank.cut_card_num}}</span>
              </span>
            </span>
            <img src="../../common/imgs/arrowright.png" alt="箭头" class="ar">
          </router-link>
        </div>
      </section>
      <section class="s2">
        <p class="title">交易密码</p>
        <div class="inputdiv passwordArea">
          <router-link to="/set_transaction_pws" class="set_transaction_pws" v-if="!isSetPws">请设置交易密码 > </router-link>
          <input type="password" v-model="password" placeholder="请输入6位数字交易密码" v-if="isSetPws">
        </div>
        <p class="title">手机验证码</p>
        <div class="inputdiv">
          <input type="number" v-model="code" placeholder="请输入验证码" id="code" @input="inputchange()">
          <tongdun-Countdown verfityMobile="false" ref="tdEle" wt='2.6rem' hg='0.74rem' beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60" @run="getCode" @getTdToken="getTdToken()"></tongdun-Countdown>
        </div>
        <p class="forgetPws">
          <a href="javascript:void 0;" @click="showDialog">忘记交易密码 申请找回</a>
        </p>
        <button :class="btnClass" @click="sub">提 交</button>
        <p class="reminder">温馨提示:暂不支持信用卡</p>
      </section>
    </div>
    <dia-log ref="dl" msg="您还不是实名会员,需要立即去实名认证吗？" @confirm="confirm"></dia-log>
    <dia-log ref="dl2" v-bind:msg="msg"></dia-log>
    <dia-log ref="dl3" v-bind:msg="cashWithdrawMsg" @confirm="confirmCashWithDraw"></dia-log><!--提现确认弹窗-->
  </div>
</template>

<script>
  import { getMbCode2 , isSetTransactionPws , getBindBanks , cashWithdrawCny  , cashWithdrawOtc , myAssets } from '../../http/api';
  import '../../common/css/iosselect.css';
  export default {
    name: 'cash_withdraw',
    inject : ['reload'],
    data() {
      return {
        introduce: '提现首页',
        cashWithdrawMsg : '您确定提现3000CNY到尾号为XXXX的银行卡吗？',
        coinsArr:[
          { value :'CNY'},
          /* { value :'OTC'}, */
        ],//
        msg:'找回交易密码请打开APP操作',
        unit : 'CNY',//货币单位
        getNum:'',//提现数量
        password:'',//交易密码
        least:'',//货币余额
        code:'',//验证码
        mobile:this.$store.state.mobile,//手机号
        btnClass : 'submitNot',//按钮背景样式，判断是否允许点击
        bankImg:"",//银行图片
        selBank:null,//选择的提现银行
        yzm_token:'',//同盾验证
        isSetPws : false,//是否设置交易密码
      }
    },
    components:{
      DiaLog: resolve => { require(['../../components/dialog'], resolve) },
      tongdunCountdown : resolve => { require(['../../components/tongdunCountdown'],resolve) },//同盾倒计时功能插件
    },
    mounted() {
      let thiz = this;
      let Not = {  noLoading:true , noToast:true };
      let https = [
        isSetTransactionPws(Not).then( res => {
          thiz.isSetPws =  Number(res.code) === 344 ? false : true;
        }),
         myAssets(Not).then(res => {
           //获取账户资产
          if (res.code == 200) {
              let data = res.data.res;
              let cny = data.rmb;
              thiz.least = thiz.numSlice( cny , 2);
          }
        })
      ];
      if( thiz.$store.state.selectBank ){
        //判断store存在默认提现卡
        thiz.selBank  = JSON.parse( thiz.$store.state.selectBank );
      } else {
        https.push( getBindBanks(Not).then( res => {
          //获取绑定的银行列表
          if( res.code == 200 ){
            let data = res.data.list;
            if( data.length > 0 ){
              let cur = data[0];
              let cardNum = cur.bank_card_num;//银行卡号
              cur.cut_card_num = cardNum.substring( cardNum.length - 4);//切取后的银行后四位
              thiz.selBank = cur;//默认第一个银行卡
            }
          }
        }))
      }
      thiz.loading();
      Promise.all(https).then( () => {
        thiz.closeLoading();
        let newImgSrc = thiz.selBank ? thiz.selBank.small_img : '';
        if( newImgSrc ){
          let nimg = new Image();
          nimg.src = thiz.selBank.small_img || '';
          nimg.onload = res =>{
            thiz.bankImg = nimg.src;
          }
        }
      });
    },
    computed : {
      listenChange () {
        return { getNum:this.getNum , password:this.password  , code:this.code  , selBank:this.selBank  , yzm_token :this.yzm_token  };
      }
    },
    watch:{
      getNum( val ){
        if( val > this.least ){
          this.getNum = parseInt(this.least);
        }
      },
      password(){
        this.password = this.password.replace(/[^\d]/g,'').slice(0,6)
      },
      'listenChange'( val ){
        this.inputchange();
      }
    },
    methods:{
      showDialog(){
        this.$refs.dl2.dialogShow();
      },
      inputchange(){
        if( Number(this.getNum )> Number(this.least) ){
          this.getNum = this.least;
        }
        this.btnClass = this.getNum && this.password && this.code && this.selBank && this.yzm_token ? 'submit' : 'submitNot';
      },
      createSel(){
        let thiz = this;
        if( thiz.coinsArr ){
          let iosSelect = require('../../common/js/iosselect').iosSelect;
          iosSelect( 1 , [thiz.coinsArr], {
            container: '#app',
            title: '选择币种',
            itemHeight: 50,
            itemShowCount: 3,
            callback: function ( res ) {
              thiz.unit = res.value;
            }
          });
        }
      },
      getTdToken(){
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          thiz.getCode();
        })
      },
      getCode(){
        let thiz = this;
        getMbCode2({yzm_token:thiz.yzm_token,blackBox:thiz.blackBox,token:''}).then(res => {
          if( res.code == 200 ){
            thiz.$refs.tdEle.begin();
            let toast = require('../../common/js/toast').toast;
            toast('验证码已发送至您的手机');
          }else{
            thiz.$refs.tdEle.resetTd();
          }
        })
      },
      confirm(){
          this.$router.push({path:'/chose_foreign'})
      },
      confirmCashWithDraw(){
        let toast = require('../../common/js/toast').toast , thiz = this , unit = thiz.unit;
        let params = {
          amount : thiz.getNum,
          smscaptcha : thiz.code,
          currency_code : unit,
          card_id : thiz.selBank.id,
          trade_password : thiz.password,
          noToast : true
        };
        switch (unit){
          case 'CNY' :
            cashWithdrawCny(params).then( res => {
              if( res.code == 200 ){
                toast('提现成功');
                thiz.timeout(function () {
                  thiz.reload();//提现成功刷新当前页面
                },1200)
              }else if( res.code == 609 ){
                thiz.$refs.dl.dialogShow();
              }else{
                toast(res.message);
              }
            });
            break;
          case 'OTC' :
            cashWithdrawOtc(params).then( res => {
              if( res.code == 200 ){
                toast('提现成功');
                thiz.timeout(function () {
                  thiz.reload();//提现成功刷新当前页面
                },1200)
              }else if( res.code == 609 ){
                thiz.$refs.dl.dialogShow();
              }else{
                toast(res.message);
              }
            });
            break;
        }
      },
      sub(){
        if( this.btnClass === 'submit'){
          let thiz = this;
          let unit = thiz.unit;
          thiz.cashWithdrawMsg = `您确定提现${thiz.getNum}${unit}到尾号为${thiz.selBank.cut_card_num}的银行卡吗？`;
          thiz.$refs.dl3.changeToast(thiz.cashWithdrawMsg);
          thiz.$refs.dl3.dialogShow();
        }
      }
    },
    destroyed(){
      require('../../common/js/iosselect').delSelect();
    }
  }
</script>
<style type="text/less" lang='less' scoped>
  #views{
    padding:0.3rem;text-align: left;font-size: 0.28rem;padding-bottom: 1.6rem;
    input{
      height:0.74rem;width: 100%;
    }
    input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
    input::-moz-placeholder {color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
    input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
    input{font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;font-size: 0.28rem;color: #262626}

    .content{
      background:none;
      >section{background: #fff;padding:0 0.24rem;border-radius: 0.04rem;}
      .s1{
        >p{
          font-size: 0.28rem;padding: 0.35rem 0;border-bottom: 0.02rem solid#E5E5E5;
          .right{
            float: right;
          }
          .arrowright{
            font-size: 0;height:0.18rem;margin-left: 0.08rem;;
          }
        }
        .setNum{
          border-bottom: 0.02rem solid#E5E5E5;
          >p{
            font-size: 0.28rem;padding-top: 0.32rem;padding-bottom: 0.1rem;
          }
          .inputdiv{
            height: 0.74rem;
            input{width: 100%;height: 100%;}
          }
        }
        .selectCard{
          .gettitle{
            font-size: 0.24rem;color: #999;padding-top: 0.36rem;
          }
          .name{
            line-height: 0.35rem;display: inline-block;position: relative;padding-left: 0.5rem;
            img{width: 0.35rem;height: 0.35rem;border-radius: 50%;left: 0;position: absolute;z-index: 1;top:0;}
          }
          #selCardBtn{
            padding:0.32rem 0;font-size: 0.28rem;display: inline-block;width: 100%;text-align: left;
          }
          .ar{
            float: right;height: 0.18rem;margin-top: 0.09rem;
          }
        }
      }
      .s2{
        margin-top:0.13rem;
        >.title{
          padding-top: 0.38rem;padding-bottom: 0.1rem;
        }
        .inputdiv{
          border-bottom: 0.02rem solid#E5E5E5;position: relative;
          #cd_box{
            right:0!important;position:absolute;left:auto;float: right;width:2.6rem;
            /deep/.countDown{
              width: 1.6rem;float: right;height: 0.6rem;line-height: 0.6rem;font-size: 0.22rem;border-radius: 0.04rem;margin-top: 0.07rem;background: #F8D448;;
            }
          }
          #code{
            width:calc( 100% - 2.7rem );
          }
        }
        .passwordArea{
          position: relative;
          >.set_transaction_pws{
            height: 0.74rem;line-height: 0.74rem;display: inline-block;width: 100%;text-align: left;color: #f4826e;
          }
        }
        button{
          height:0.88rem;line-height: 0.88rem;font-size: 0.3rem;margin-top: 0.35rem;
        }
        .reminder{
          color: #5A5A5A;font-size: 0.24rem;padding-top: 0.30rem;padding-bottom: 0.54rem;text-align: center;
        }
        .forgetPws{
          display: inline-block;width: 100%;overflow: hidden;padding-top: 0.22rem;
          >a{
            float: right;color: #999;font-size: 0.22rem;text-decoration: underline;
          }
        }
      }
    }
  }
</style>
